<template>
  <div class="item" v-if="this.data">
    <div class="top">
      <h3>我有一本书,献于诸君赏</h3>
      <button>发表</button>
    </div>
    <div v-if="this.data.length != 0">
      <div class="list-item" v-for="items in this.data" :key="items.nid">
        <router-link :to="`/bookdetails/${items.bid}`" class="left">
          <img :src="items.bsrc" alt="" />
        </router-link>

        <div class="right">
          <div class="r-top">
            <router-link :to="`/bookdetails/` + items.bid" class="bookname">
              {{ items.bname }}
            </router-link>
            <span class="writer">作者:{{ items.author }}</span>
          </div>
          <span class="word">推荐语:{{ items.bwords }}</span>
          <span class="user">
            推荐人:{{ items.name }}
            <em
              @click="addGz(items.id)"
              v-once-click
              class="el-icon-message-solid"
            ></em>
          </span>
        </div>
      </div>
      <div class="pagination">
        <button @click="minusPage" :disabled="this.page == 1">上一页</button>
        <span>{{ page }}</span>
        <button @click="addPage" :disabled="this.maxPage == page">
          下一页
        </button>
        <span>共{{ maxPage }}页</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: "",
      num: 0,
      page: 1,
      maxPage: 1,
    };
  },
  watch: {
    page() {
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 挂载时(页面出生,显示),自动触发请求
    // 发送请求
    getData() {
      const url = "http://127.0.0.1:3000/v1/library/book";
      console.log(url);
      this.axios.get(url).then((res) => {
        this.data = res.data;
        console.log("this.data:", this.data);
        this.maxPage = Math.ceil(this.data.length / 20);
        this.data = this.data.slice(20 * (this.page - 1), 20 * this.page);
        console.log(this.data);
        console.log(this.data.length);
      });
    },
    addGz(id) {
      const url4 = "http://127.0.0.1:3000/v1/library/updateguanzhu/";
      const params = `id=${id}`;
      console.log(url4, params);
      this.axios.put(url4, params).then((res) => {
        console.log("关注成功！");
      });
    },
    addPage() {
      this.page += 1;
    },
    minusPage() {
      this.page -= 1;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
*a {
  text-decoration: none;
  color: #000;
}
.pagination {
  text-align: center;
  padding: 15px;
  span {
    padding: 0 15px;
  }
  button {
    border-color: hsla(0, 0%, 100%, 0.5);
    border-radius: 5px;
    padding: 5px;
    // border: none;
    // outline: none;
  }
  button:hover {
    background-color: blue;
  }
}
.item {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding-top: 7.5px;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid black;
    margin: 0 15px;
    // border: 1px solid black;
    button {
      border-radius: 5px;
      font-size: 14px;
      padding: 5px 25px;
      background: #47c6ff;
    }
  }

  .list-item {
    // width: 600px;
    display: flex;
    justify-content: space-between;
    padding: 15px 15px;
    border-bottom: 1px solid black;
    // margin: 10px 0;

    .left {
      img {
        width: 130px;
        height: 180px;
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      // align-items: center;
      justify-content: space-around;
      margin: 0 15px;
      width: 100%;

      .r-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .bookname {
        display: flex;
        justify-content: flex-start;
        font-size: 1.8rem;
        font-weight: 400;
      }

      .user {
        display: flex;
        justify-content: flex-end;
        font-size: 1.2rem;
      }
      .word {
        margin-top: 10px;
        font-size: 1rem;
        display: flex;
        justify-content: flex-start;
      }
    }
  }
}
</style>
